<!--  -->
<template>
<div class='loginbg'>
    <div class="btn_tab">
      <span @click="toRegis" class="regin">注册</span>
    </div>
    <p class="title_welcome">欢迎使用源聚通</p>
   

    <van-form @submit="onSubmit" style="padding-top: 70px;">
  <van-field
    v-model="username"
    name="手机号"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
  />
  <van-field
  style="margin-top:20px"
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <p class="forget" @click="toForget">忘记密码?</p>
  <!-- <div style="margin: 16px;"> -->
        <van-button class="btn_charge" :disabled="!password||!username" type="danger" @click="showTip = true">登录</van-button>

  <!-- </div> -->
</van-form>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import qs from "qs";
// import { CountDown, Checkbox } from "vant";
// import { Dialog } from "vant";
import Fetch from "../../utils/fetch";
export default {
//import引入的组件需要注入到对象中才能使用
components: {
  name:'login'
},
data() {
//这里存放数据
return {
      username: '',
      password: '',
      // data: {},
      //       bg: "",
      //       checked: true,
      //       config: {},
      //       psd: "password",
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    onSubmit(values) {
      console.log('submit', values);
      Fetch("/api/api/login", {
                username: this.username,
                password: this.password,
            }).then((res) => {
                this.$notify({
                    background: "#EAF1FF",
                    color: "#3292FF",
                    message: "登录成功",
                });
                this.$router.push('/');
            });
    },
    toRegis(){
      this.$router.push({path:'/regis'})

    },
    toForget(){
        this.$router.push({path:'/forget'})
    },
    start() {
            Fetch("/api/api/webconfig", { type: "bg" }).then((res) => {
                this.bg = 'url("' + res.data.login + '")';
            });
            Fetch("/api/api/webconfig", { type: "web" }).then((res) => {
                this.config = res.data;
            });
        },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  this.start();

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */
.loginbg{
  width: 100%;
  height: 100%;
  background: url('../../assets/loginbg.png') no-repeat;
  background-size: 100% 100%;
}
.btn_tab{
  height: 83px;
  width: 100%;
  display: flex;
  align-items: center;
  /* line-height: 83px; */
  /* text-align: right; */
  justify-content: flex-end;
  color: #FF3927;
  font-size: 16px;
font-weight: 500;


}
.regin{
padding-right: 30px;
}
.title_welcome{
  font-size: 28px;
font-weight: 600;
color: #2d2d2d;
line-height: 40px;
padding-left: 30px;
}
.formBox{
  width: 320px;
  /* margin-top: 70px; */
  margin: auto;
  padding-top: 70px;
}
.forget {
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  color: #818181;
  padding-right: 10px;
  padding-top: 10px;
}
.btn_charge {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 100px;
}
</style>